<?
$urltype = $type;
$page = 0;
$searchTrem = '';
$sortBy = 'date';
$order = 'desc';
$view = 'show';
if (isset($seachval_type))
    $urltype = $seachval_type;

//cotroller/function/sortby/order/searchteam/page
if ($this->uri->segment(7) != FALSE) {
    $searchTrem = urldecode($this->uri->segment(6));
    $page = $this->uri->segment(7);
    $sortBy = $this->uri->segment(4);
    $order = $this->uri->segment(5);
    $view = $this->uri->segment(3);
} else if ($this->uri->segment(6) != FALSE) {
    $page = $this->uri->segment(6);
    $sortBy = $this->uri->segment(4);
    $order = $this->uri->segment(5);
    $view = $this->uri->segment(3);
} else if ($this->uri->segment(5) != FALSE) {
    $page = 0;
    $sortBy = $this->uri->segment(4);
    $order = $this->uri->segment(5);
    $view = $this->uri->segment(3);
}

$status = $this->uri->segment(2);
$searchArray = unserialize($searchTrem);
$loadUrl = base_url() . 'index.php/property/' . $view . '/' . $urltype . '/' . $page;
$loadUrlGallery = base_url() . 'index.php/property/gallery/' . $urltype . '/';
$loadUrlShow = base_url() . 'index.php/property/show/' . $urltype . '/';
echo '<form id="intList">';
if (count($searchArray) > 0 && is_array($searchArray)) {
   
    foreach ($searchArray as $saname => $sa) {        
        echo '<input type="hidden" name="' . $saname . '" value="' . $sa . '" />';
        ?>         
        <script type="text/javascript">
            $('#<?= $saname ?>').val('<?= $sa ?>'); 
        </script>
        <?php
    }
    
}else{
    if(isset($search_minprice) && trim($search_minprice)!=''){
        echo '<input type="hidden" name="search_minprice" value="' . $search_minprice . '" />';
        ?>         
        <script type="text/javascript">
            $('#search_minprice').val('<?= $search_minprice ?>'); 
        </script>
        <?php
    }
    if(isset($search_maxprice) && trim($search_maxprice)!=''){
        echo '<input type="hidden" name="search_maxprice" value="' . $search_maxprice . '" />';
        ?>         
        <script type="text/javascript">
            $('#search_maxprice').val('<?= $search_maxprice ?>'); 
        </script>
        <?php
    }
    if(isset($search_bathroom) && trim($search_bathroom)!=''){
        echo '<input type="hidden" name="search_bathroom" value="' . $search_bathroom . '" />';
        ?>         
        <script type="text/javascript">
            $('#search_bathroom').val('<?= $search_bathroom ?>'); 
        </script>
        <?php
    }
    if(isset($search_bedroom) && trim($search_bedroom)!=''){
        echo '<input type="hidden" name="search_bedroom" value="' . $search_bedroom . '" />';
        ?>         
        <script type="text/javascript">
            $('#search_bedroom').val('<?= $search_bedroom ?>'); 
        </script>
        <?php
    }
    if(isset($search_propertytype) && trim($search_propertytype)!=''){
        echo '<input type="hidden" name="search_propertytype" value="' . $search_propertytype . '" />';  
        ?>         
        <script type="text/javascript">
            $('#search_propertytype').val('<?= $search_propertytype ?>'); 
        </script>
        <?php
    }
     if(isset($suburbs_id) && trim($suburbs_id)!=''){
        echo '<input type="hidden" name="suburbs_id" value="' . $suburbs_id . '" />';        
        ?>         
        <script type="text/javascript">
            $('#suburbs_id').val('<?= $suburbs_id ?>'); 
        </script>
        <?php
    }
     if(isset($surrounding) && trim($surrounding)!=''){
        echo '<input type="hidden" name="surrounding" value="' . $surrounding . '" />';        
    }
     if(isset($search_status) && trim($search_status)!=''){
          echo '<input type="hidden" name="search_status" value="' . $search_status . '" />';
          ?>         
        <script type="text/javascript">
            $('#search_status').val('<?= $search_status ?>'); 
        </script>
        <?php
    }if(isset($suburbs) && trim($suburbs)!=''){
          echo '<input type="hidden" name="suburbs" value="' . $suburbs . '" />';
          ?>         
        <script type="text/javascript">
            $('#suburbs').val('<?= $suburbs ?>'); 
        </script>
        <?php
    }
    
}
echo '</form>';
?>
<script type="text/javascript">
    
    $(document).ready(function(){  
        autocomplate('suburbs');
        //initial load  
        dipalyStyles('<?= $sortBy ?>','<?= $order ?>');
        var intfields = $("#intList :input").serializeArray();
        loadProperties('<?= $loadUrl ?>','<?= $sortBy ?>','<?= $order ?>',intfields,'<?= $page ?>');  
        
        $('#seachvals :input').keypress(function(e) {
            if(e.which == 13) {
                jQuery(this).blur();
                searchListing();
            }
        });
        
        $('#suburbs').keypress(function(e) {
            if(e.which == 13) {
                e.preventDefault();
                jQuery(this).blur();
                searchListing();
            }
        });
        
        $( "#suburbs" ).autocomplete({
            delay: 100,
            source: function(request, response) {
                $.ajax({
                    url: "<?php echo site_url('home/ajax_search?part=') ?>"+request.term,
                    dataType: 'json',
                    success: function(json) {		
                        response($.map(json, function(item,key) {
                            return {
                                label: item,
                                values: key
                            }
                        }));
                        return false
                    }
                });
            }, 
            select: function(event, ui) {
                $( "#suburbs_id" ).val(ui.item.values);
            },
            focus: function(event, ui) {
                return false;
            }
        });
        
    });
    
   
    
    function searchListing(){
        var sortby= $('#sortBy').val();
        var order= $('#orderBy').val(); 
        var fields = $("#seachvals :input").serializeArray();       
        loadProperties('<?= $loadUrl ?>',sortby,order,fields,'0')
    }
    
    function openProperty(id) {
        window.location = "<?= site_url('property/profile/' . $type) ?>/"+id;
    }
</script>
<script>
    function loadProperties(url,sortby,order,searchby,page){
       
        $.ajax({  
            type:"post",
            data: {searchby: searchby,sortby:sortby,order:order,page:page},
            url:url,
            success: function(data){
                var obj = jQuery.parseJSON(data);                                      
                $('#properties').html(obj.tasks);
                $("#datalist-navigation").html(obj.links);
                $("#Count").html(obj.total);
                $("#datalist-navigation").show();   
               
               
                if(obj.search!=0){
                    var searchArray = obj.search;
                    if(obj.search.search_propertytype!=0)
                        $('#search_propertytype').val(obj.search.search_propertytype);
                    else
                        $('#search_propertytype').val('');
                     
                    if(obj.search.search_minprice!=0)
                        $('#search_minprice').val(obj.search.search_minprice);
                    else
                        $('#search_minprice').val('');
                    
                    if(obj.search.search_maxprice!=0)
                        $('#search_maxprice').val(obj.search.search_maxprice);
                    else
                        $('#search_maxprice').val('');
                     
                    if(obj.search.search_bathroom!=0)
                        $('#search_bathroom').val(obj.search.search_bathroom);
                    else
                        $('#search_bathroom').val('');
                     
                    if(obj.search.search_bedroom!=0)
                        $('#search_bedroom').val(obj.search.search_bedroom);
                    else
                        $('#search_bedroom').val('');
                     
                   
                    if(obj.search.suburbs!=0)
                        $('#suburbs').val(obj.search.suburbs);
                    else
                        $('#suburbs').val('');
                    
                    if(obj.search.suburbs_id!=0)
                        $('#suburbs_id').val(obj.suburbs_id.suburbs);
                    else
                        $('#suburbs_id').val('');
                     
                    if(obj.search.search_status!=0)
                        $('#search_status').val(obj.search.search_status);
                    else
                        $('#search_status').val('');
                    
                }
                
                if(obj.sortby!=0)
                    $('#datalist-sort-order').val(obj.sortby);
                
                if(obj.order=='asc')
                    $('#datalist-sort-asc').prop('checked', true);
                
                
            } 
        });  
    }
    
    function sortbyVal(sortbyVal, orderVal){
        var fields = $("#seachvals :input").serializeArray();  
        var sortby= sortbyVal;
        var order= orderVal;
        
        //chage attribute select
        dipalyStyles(sortby,order);
        
       
        loadProperties('<?= $loadUrl ?>', sortby,order,fields,'<?= $page ?>');
        
    }
    
    function dipalyStyles(sortby,order){
        $('#dateFilterdesc').attr('class', 'order');
        $('#priceFilterdesc').attr('class', 'order');
        $('#priceFilterasc').attr('class', 'order');
        $('#inspection_dateFilterdesc').attr('class', 'order');
        
        $('#'+sortby+'Filter'+order).attr('class', 'order active');
        
        $('#sortBy').val(sortby);
        $('#orderBy').val(order);
    }
    
    function chagngeView(viewname){
        var sortby= $('#sortBy').val();
        var order= $('#orderBy').val(); 
        
        if(viewname=='gallery'){
            $('#view').val('gallery');
            var fields = $("#seachvals :input").serializeArray();    
            loadProperties('<?= $loadUrlGallery ?>0', sortby,order,fields,'0');
            $('#list-view-tab').attr('class', 'selected-list');
            $('#gallery-view-tab').attr('class', 'selected-gallery active');
           
        }
        else{
            $('#view').val('show');
            var fields = $("#seachvals :input").serializeArray();    
            loadProperties('<?= $loadUrlShow ?>0', sortby,order,fields,'0');
            $('#list-view-tab').attr('class', 'selected-list active');
            $('#gallery-view-tab').attr('class', 'selected-gallery');
            
        }
    }

</script>

<div class="wrapper clearfix" id="search-bar">

    <div class="section icon">
        <img width="100%" src="<?php echo base_url() ?>img/icon-magnify.png">
    </div>

    <div class="section salerent">
        <strong>
            BUY</strong>
    </div>

    <div class="section range">
        <strong>Min - Max</strong>
    </div>

    <div class="section last particular">
        <span class="picon beds">-</span>
        <span class="picon baths">-</span>
        <span class="picon cars">-</span>
    </div>
    <div class="clearer"></div>
</div>
<div style="display: none;" class="" id="searchform-properties">

    <!-- Form body -->
    <form action="" method="get">
        <!-- Title -->
        <div class="clearfix">
            <label>
                <input type="text" 
                       name="suburbs" 
                       placeholder="Suburb/Town" 
                       id ="suburbs" 
                       data-input-type="autocomplete" 
                       value="<?= (isset($seachval_suburbs)) ? $seachval_suburbs : '' ?>" class="col2" /> 
                <input type="hidden" id="suburbs_id" value="<?= (isset($suburbs_id) && $suburbs_id != '') ? $suburbs_id : '' ?>" name ="suburbs_id">
            </label>
        </div>

        <div class="section clearfix">
            <label class="toggle-label">Surrounding Suburbs</label>
            <div style="display:none;" class="toogles">
                <input type="radio" value="1" name="surrounding" id="surroundingSuburbs_yes">
                <input type="radio" value="0" name="surrounding" id="surroundingSuburbs_no">
            </div>
            <div class="toggle-button clearfix ">
                <button value="yes" class="yes "></button>
                <button value="no" class="no selected"></button> 
            </div>
        </div>

        <div class="section clearfix">
            <label>
                <select name="search_minprice">
                    <option selected="selected" value="" class="omit">Min Price</option>
                    <option value="50000">$50,000</option>
                    <option value="100000">$100,000</option>
                    <option value="150000">$150,000</option>
                    <option value="200000">$200,000</option>
                    <option value="250000">$250,000</option>
                    <option value="300000">$300,000</option>
                    <option value="350000">$350,000</option>
                    <option value="400000">$400,000</option>
                    <option value="450000">$450,000</option>
                    <option value="500000">$500,000</option>
                    <option value="550000">$550,000</option>
                    <option value="600000">$600,000</option>
                    <option value="650000">$650,000</option>
                    <option value="700000">$700,000</option>
                    <option value="750000">$750,000</option>
                    <option value="800000">$800,000</option>
                    <option value="850000">$850,000</option>
                    <option value="900000">$900,000</option>
                    <option value="950000">$950,000</option>
                    <option value="1000000">$1,000,000</option>
                    <option value="1200000">$1,200,000</option>
                    <option value="1400000">$1,400,000</option>
                    <option value="1600000">$1,600,000</option>
                    <option value="1800000">$1,800,000</option>
                    <option value="2000000">$2,000,000</option>
                </select>
            </label>
            <label>
                <select name="search_maxprice" class="last">
                    <option selected="selected" value="" class="omit">Max Price</option>
                    <option value="50000">$50,000</option>
                    <option value="100000">$100,000</option>
                    <option value="150000">$150,000</option>
                    <option value="200000">$200,000</option>
                    <option value="250000">$250,000</option>
                    <option value="300000">$300,000</option>
                    <option value="350000">$350,000</option>
                    <option value="400000">$400,000</option>
                    <option value="450000">$450,000</option>
                    <option value="500000">$500,000</option>
                    <option value="550000">$550,000</option>
                    <option value="600000">$600,000</option>
                    <option value="650000">$650,000</option>
                    <option value="700000">$700,000</option>
                    <option value="750000">$750,000</option>
                    <option value="800000">$800,000</option>
                    <option value="850000">$850,000</option>
                    <option value="900000">$900,000</option>
                    <option value="950000">$950,000</option>
                    <option value="1000000">$1,000,000</option>
                    <option value="1200000">$1,200,000</option>
                    <option value="1400000">$1,400,000</option>
                    <option value="1600000">$1,600,000</option>
                    <option value="1800000">$1,800,000</option>
                    <option value="2000000">$2,000,000</option>
                </select>
            </label>

        </div>

        <div class="section clearfix">
            <label>
                <select name="search_propertytype">
                    <option value="" class="omit">Property Type</option>
                    <option value="residential" selected="selected">Residential</option>
                    <option value="rental">Rental</option>
                    <option value="commercial">Commercial</option>
                </select>
            </label>
            <label>
                <select name="search_bedroom" class="last">
                    <option selected="selected" value="" class="omit">Bedrooms</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                </select>
            </label>
            <label>
                <select name="search_bathroom">
                    <option selected="selected" value="" class="omit">Bathrooms</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                </select>
            </label>
            <label>
                <input type="button" value="SEARCH" name="search" onclick="searchListing()">
            </label>	
        </div>
    </form>
</div>
<div id="page-body" class="white-bg">
    <div class="clearer"></div>
    <div id="properties"></div>


    <div class="clearfix"></div>
    <div id="datalist-navigation" class="datalist-navigation">

    </div>
</div>
<script>
    
    // Search form dropdown button
    $(function() {
        var content = $("#searchform-properties");
        var trigger = $("#search-bar");

        trigger.click(function() {
            if (content.is(":visible")) {
                content.hide();
                trigger.removeClass('active');
            } else {
                content.show();
                trigger.addClass('active');
            }
        });
    });

    // Surronding suburbs toggle button
    $(function() {

        // Initial state
		

        // Click events
        $(".toggle-button button").click(function(e){
            e.preventDefault();
            $(".toggle-button button").removeClass("selected");
            $(this).addClass("selected");

            // set hidden input value
            var val = $(this).val();
            $("input[name=surrounding]").attr("checked",false);
            $("#surroundingSuburbs_" + val).attr("checked",true);

            // Toogle background image
            if(val == "yes") {
                $(".toggle-button").addClass("active");
            } else {
                $(".toggle-button").removeClass("active");
            }
        });
    });
</script>